// pages/busline/busline.js
let app = getApp();
// const { rejects } = require('assert/strict');
// const { resolve } = require('dns');
var util = require('../../utils/md5.js')
/**
 * ======introduce : Marker 新增须知规则
 * Marker添加新的组别的话，需要修改的地方：refreshMarker，这个是刷新地图marker的，拼接所有的marker。所以新增Marker组别要修改这里
 * OnTapBusLine，这个是点击线路列表时触发的，因为会涉及到切换线路，所以要清空一下上一条线路的数据（当然，如果你的Marker和上一条线路不相关也可以不清空）
 * clearInput()，这个是清空输入框时触发的方法，所以相关数据也要清空掉。
 * ==========================================================================================================
 * =======introduce : 编号规则
 * 这里写一下id的编号规则，公交车实时位置的id设置为负数，车站的id设置范围为0~999，起始点终点的坐标设置为1000以上
 */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    position:'relative',
    width:'100%',
    height:'55vh',
    longitude:'',//地图初始的经纬度
    latitude:'',
    centerLongitude:'',//地图中心的经纬度，在地图拖动地图的时候可以获取到，一般是在获取到附近的店铺的时候可以使用
    centerLatitude:'',

    markers:[],//地图上的标记点

    busstopsMarkers:[],//经过操作之后的公交站marker
    selectedBusLine:[],//当前选中的公交路线信息

    currentBusLocation:[],//当前选中的公交路线的公交车实时位置信息
    buslocationMarkers:[],//经过操作之后的公交实时位置marker

    start_end_Marker:[],//公交路线起点和终点的Marker

    polyline:[{
      points:[],
      width:7,
      color:"#00b294",
      borderColor:"#b8b8b8",
      arrowLine: true //开启箭头，貌似模拟器看不见
    }],//地图上的曲线
    includepoints:[],
    StoreList:[],//列表缓存的地方
    searchData: '',//输入框中的值
    clear:false,//控制输入框中的清除图标
    changeMap:false,//控制拉起公交路线列表
    showLabel:true,//是否展示标签
    zhandian:'',//公交线路名称，如“109路”，用来请求实时位置用的
    tapedBusInfo:{},//点击公交车之后出现的数据
    NextBusStop:{},//距离下一站

    currentBtn:-1,//控制列表选中样式
  },



//marker点击监听函数
markertap:function(e){
  console.log("当前点击的Marker",e);
  let markerID = e.markerId;
  if(markerID<0){
    console.log("===公交车Marker==")
    let index = (markerID * -1) - 10; //通过id获取到该公交车在数组中的位置

    let tapedBusInfo = this.data.currentBusLocation[index];//获取公交车位置信息
    console.log("点击的公交车信息：",tapedBusInfo);

    let NextBusStop = this.data.selectedBusLine.busstops[tapedBusInfo.dis_stat - 1];
    console.log("下一站:",NextBusStop.name);

    //设置数据到界面上
    this.setData({
      tapedBusInfo: tapedBusInfo,
      NextBusStop:NextBusStop
    })
  }
},

//刷新实时位置按钮的监听函数
refreshButton(e){
  console.log('公交实时位置更新')
  //刷新实时位置的信息，然后重新制作Marker
  let that = this;
  if(that.data.zhandian == ''){
    wx.showToast({
      title: '请先选择站点再更新',
    });
    return ;
  }
  that.busLocationDrawing(that.data.zhandian).then(res =>{
    that.refreshMarker();
  });
},
//标签显示按钮的监听函数
switchLabelButton(){
  console.log('切换标签显示',this.data.showLabel);
  if(this.data.markers.length == 0){
    wx.showToast({
      title: '地图上没有数据',
    });
    return ;
  }
  //重新制作一份不带标签的车站Marker，然后重新推进去
  if(this.data.showLabel == true){
    this.setData({
      showLabel:false
    });
    this.drawBusStopsMarkers(this.data.selectedBusLine.busstops, this.data.showLabel);
    this.refreshMarker();
  }else{
    //重新制作一份带标签的车站Marker，然后重新推进去
    this.setData({
      showLabel:true
    });
    this.drawBusStopsMarkers(this.data.selectedBusLine.busstops, this.data.showLabel);
    this.refreshMarker();
  }
 


},

//地图滑动监听函数
regionchangeMap:function(e){
  // console.log("地图滑动数据：",e)
},

//控制地图大小的函数
changeMap:function(){
  let changeMap = this.data.changeMap
  console.log("更改地图大小",changeMap)
  if(changeMap == false){
    this.setData({
      changeMap: true,
      position: 'relative',
      width: '100%',
      height: '92vh',
    })
  }else{
    this.setData({
      changeMap: false,
      position: 'relative',
      width: '100%',
      height: '55vh',
    })
  }
},

//搜索框的监听函数
searchInput(e){
  let value = e.detail.value
  console.log("输入框的值：",value)
  if(value == ''){//输入框为空时
    // this.setData({
    //   markers: [],//清空地图上的marker
    //   'polyline[0].points' :[],//地图上的polyline也清空
    //   StoreList: [],//清空存储列表
    //   clear: false//删除图标也隐藏
    // })

    //直接调用清空方法
    this.clearInput();
  }else{
    this.setData({
      searchData:value,//设置好值
      clear:true//显示隐藏按钮
    })
  }
},

//搜索框确认提交的按钮
goSearch:function(){
  let key = this.data.searchData
  if(key){
    //先清空列表，再前去搜索
    this.setData({
      StoreList:[]
    });
    this.searchBusLine(key);
  }else{
    wx.showToast({
      title:'请输入搜索内容',
      icon:'none',
      duration: 1000,
    });
  }
},

//搜索框清除输入值按钮监听器
clearInput(){
  this.setData({
    markers:[],
    'polyline[0].points' :[],//地图上的polyline也清空

    //Marker们：
    busstopsMarkers:[],//公交车站Marker清空
    buslocationMarkers:[],//实时位置Marker清空
    currentBusLocation:[],//实时位置数据清空
    selectedBusLine:[],//公交车路线位置清空
    start_end_Marker:[],//公家车站起点和终点

    //界面相关数据：
    StoreList:[],//搜索列表清空
    searchData: '',//搜索框内容清空
    clear:false,//隐藏交叉
    zhandian:'',//站点名称也清空
    tapedBusInfo:{},//点击的公交车相关信息也清空
    NextBusStop:{},//下一个站点信息清空
  });
},

//按照搜索框的内容进行搜索
searchBusLine:function(key){
  let that = this;
  //直接把key送达后台进行模糊请求就好了
  wx.request({
    url: app.globalData.headurl+"getBusLineByLineName",
    data:{
      lineName:key
    },
    method:'GET',
    dataType:'json',
    success:function(res){
      console.log("公交线路数据：",res.data)
      if(res.data.success==true){
        //因为数据有点问题，所以需要对返回的结果进行一些处理
        let buslines_data = res.data.data
        for(let i=0;i<buslines_data.length;i++){
          let totalStatistic = JSON.parse(buslines_data[i].totalStatistic) //就是这个字段，是字符串，不是JSON对象
          buslines_data[i]['totalStatistic'] = totalStatistic
        }
        that.setData({
          StoreList: buslines_data
        });
      }else{
        wx.showToast({
          title: '查询失败，请更换关键词',
        })
      }
    },
    fail:(e)=>{
      wx.showToast({
        title: '网络请求出错',
      })
    }
  })
},

//点击公交路线项触发的方法, 这个方法一般是切换线路显示，一般busStop和busLocation和polyline，这三个数据是会被覆盖掉的
OnTapBusLine:function(e){
  let that = this;
  //一个样式处理函数，忽略它。
  that.selectStyleControll(e);

  console.log("点击了:",e.currentTarget.dataset.busline);
  //因为点击事件中的数据不会被覆盖掉，所以这里要手动清除一下相关数据
  that.setData({
    NextBusStop:{},
    tapedBusInfo:{},
    zhandian:'',
    start_end_Marker:[]
  });

  //将当前点击的公交路线信息存起来
  that.setData({
    selectedBusLine:e.currentTarget.dataset.busline.totalStatistic.buslines[0]
  })
  let busLineData = e.currentTarget.dataset.busline.totalStatistic.buslines
  //绘制Polyline
  that.drawBusStopsPolyLine(busLineData[0].polyline);//这个是直接绘制的

  //处理公交车站点数据
  that.drawBusStopsMarkers(busLineData[0].busstops,that.data.showLabel);

  //处理公交车站点起点和终点数据
  that.drawStartEndMarkers(busLineData[0].busstops[0],  busLineData[0].busstops[  busLineData[0].busstops.length-1  ]);

  //处理公交车实时位置数据，这个数据是界面传递过来的
  let waitForBusLocationData = that.busLocationDrawing(e.currentTarget.dataset.busline.busline);

  waitForBusLocationData.then(res =>{
    that.refreshMarker();//将各组Marker数组刷新到界面上
  })
},

selectStyleControll(e){
  if (this.data.currentBtn == e.currentTarget.dataset.index) {
    // 再点一下 取消选中
    this.setData({
      currentBtn: -1
    })
  } else {
    this.setData({
      currentBtn: e.currentTarget.dataset.index
    })
  }
},

//绘制公交路线polyline
drawBusStopsPolyLine:function(polyline){
  this.setData({
    'polyline[0].points':[]
  });
  let pointStrArr = polyline.split(";")
  let pointArr = []
  for(let j=0;j<pointStrArr.length;j++){
    let long_lati = pointStrArr[j].split(',');
    let point = {
      longitude:long_lati[0],
      latitude:long_lati[1]
    }
    pointArr.push(point);
  }
  this.setData({
    'polyline[0].points': pointArr
  });
  //绘制完毕之后，移动视图。
  let mapContext = wx.createMapContext('busMap')
  mapContext.includePoints({
    points:pointArr
  })
},

//绘制车站Marker
/**
 * 
 * @param {标点信息数组} markers 
 * @param {boolean 控制标点是否显示标签} showLabel 
 */
//这里写一下id的编号规则，公交车实时位置的id设置为负数，车站的id设置范围为0~999，起始点终点的坐标设置为1000以上
drawBusStopsMarkers(busstops,showLabel){
  //制作符合要求的Marker
  let markerArr = [];
  for(let i=0;i<busstops.length;i++){
    let lng_lat = (busstops[i].location).split(",")
    let marker = {
      id: Number(busstops[i].sequence),
      iconPath: "../../images/busstop.png",
      longitude:lng_lat[0],
      latitude:lng_lat[1],
      width: 20,
      height: 20,
      alpha: 0.7,
      zIndex:1,//层级是摆设，基本上没用
    }
    if(showLabel == true){
      marker['label'] = {
        content:busstops[i].name,
        color:'#002329',
        fontSize:12,
        borderWidth:4,
        borderColor:'#10239e',
        borderRadius:8,
        bgColor:'#e6f7ff',
        padding:4,
        textAlign:"center",
        // anchorX:'',//偏移量
        // anchorY:''
      }
    }
    markerArr.push(marker);
  }
  //刷新公交站Marker
  this.setData({
    busstopsMarkers:markerArr
  });

  //公交车站绘制完成之后，再绘制公交车的实时位置
  // console.log(busstops)
  // let line_name = (busstops.name).slice(0,(busstops.name).indexOf("路")+1);
  // console.log(line_name);
  // this.GetAndDrawBusCurrentLocation(busstops.name)

  //最后刷新，
  // this.refreshMarker();
    
},

/**
 * 设置一个异步函数，用来编排公交线路绘制的
 * @param {*} keyword 
 */
async busLocationDrawing(keyword){
  let that = this;
  return await that.GetAndDrawBusCurrentLocation(keyword).then((res)=>{
    //数据处理成功时的操作
    if(res == "NoBus"){
      //无公交车实时位置，清空
      console.log("当前线路上没有公交车在运行，清空公交车实时位置信息");
      that.setData({
        currentBusLocation:[],//数据和Marker都清空掉，免得切换路线时出错
        buslocationMarkers:[]
      });
    }else{
      //有公交车实时位置，设置数据，并且制作Markers
      console.log("公交车实时位置：",res)
      that.setData({
        currentBusLocation: res
      });
      that.drawBusLocation(res);
      // that.refreshMarker();
    }
  },(error)=>{
    console.log('公交车接口报错',error)
  });
},


/**
 * 这个接口，先请求公交路线信息，得到公交路线编号，然后获取到公交车实时位置。
 * @param {线路名称} zhandian 
 */
GetAndDrawBusCurrentLocation(keyword){
  let zhandian = (keyword).slice(0,keyword.indexOf("路")+1);
  //这个站点名称也存到data中去，界面显示以及其他地方要使用
  this.setData({
    zhandian: zhandian,
    searchData:zhandian
  });

  console.log(zhandian+"公交车实时位置正在请求中");
  wx.showLoading({
    title: '正在请求数据',
  });
  let that = this;

  return new Promise((resolve,reject)=>{
     //首先请求笑园的公交线路接口
  let key = '05d64a8244c9a4b13483d50ce6dc1b27';
  let keySec = util.hexMD5('18818441944'+key+'luxian');
  wx.request({
    url: 'http://api.wxbus163.cn/z_busapi/BusApi.php',
    method:'GET',
    data:{
      optype:'luxian',
      uname:'18818441944',
      cityid:'85',//广州市的城市id是85
      keywords:zhandian,//几路公交
      keySecret:keySec,//是uname+key+optype三者结合，md5加密。
    },
    success:function(res){
      console.log("校园公交路线的数据：",JSON.stringify(res));
      if(res.data.return_code=='error'){
        wx.showToast({
          title: '获取公交实时位置失败',
        });
        wx.hideLoading();  
      }
      if(res.data.error_code == '003'){
        wx.hideLoading();
        wx.showToast({
          title: '关键词错误，请刷新',
        });
      }

        //再发送一次请求，请求公交车的实时位置信息。
        var keySec2 =util.hexMD5('18818441944'+key+'rtbus');
        wx.request({
          url: 'http://api.wxbus163.cn/z_busapi/BusApi.php',
          data:{
            optype:'rtbus',
            uname:'18818441944',
            cityid:'85',//广州市的城市id是85
            keywords:zhandian,//几路公交
            bus_linestrid:res.data.returl_list[0].bus_linestrid,//线路id“NDQwMTAwMDE2MTg2”
            bus_linenum:res.data.returl_list[0].bus_linenum,//线路编号“440100”
            bus_staname:res.data.returl_list[0].bus_staname,//线路名称“109路”
            keySecret:keySec2,//是uname+key+optype三者结合，md5加密。
          },
          success:function(r){
            wx.hideLoading();
            console.log("公交车实时位置接口:",r)
            //当接口查询出错时，把错误代码传递出去
            if(r.data.error_code != "0"){
              reject(r.data.error_code);
            }
            //没有公交车实时位置数据的时候，清空一下公交车的实时位置信息，如果不清楚的话，切换线路时，如果当前线路没有信息，就有可能会使用上一条线路的位置信息，导致出错
            if(r.data.returl_list.buses == null){
              
              resolve("NoBus");
            }else{
              //调用绘制方法
              console.log(`当前线路上的公交车数据：${r.data.returl_list.buses}`);
              //先将数据保存起来。
              // that.setData({
              //   currentBusLocation: r.data.returl_list.buses
              // });
              //调用公交路线的处理方法，将数据处理
              // that.drawBusLocation(r.data.returl_list.buses);
              
              //实时位置不为空，将数据传递出去
              resolve(r.data.returl_list.buses);

            }
          }
        })//wx.request 实时位置
    }
  })//wx.request 线路编号
  
  });
 
  //function
},
/**
 * 
 * @param {处理公交车实时位置为Marker的方法} buslocation 
 */
drawBusLocation(buslocations){
  //将公交车实时位置数据处理为Marker，怼进存储公交车实时位置的数组就好了，
  let MarkerArr = [];
  for(let i=0;i<buslocations.length;i++){
    let marker = {
      id: Number(i+10) * -1,  //公交车实时位置的信息要处理为负数
      iconPath: "../../images/gongjiaoche.png",
      longitude:buslocations[i].longing,
      latitude:buslocations[i].lating,
      width: 60,
      height: 60,
      zIndex:100,//层级是摆设，基本上没用
    };
    MarkerArr.push(marker);
  };
  //直接覆盖掉原来的公交车实时Marker
  this.setData({
    buslocationMarkers: MarkerArr
  });



},

/**
 * 绘制公交路线起点和终点的方法
 * @param {*} start 
 * @param {*} end 
 */
drawStartEndMarkers(start, end){
  let start_lng_lat = start.location.split(",");
  let end_lng_lat = end.location.split(",");
  let startMarker = {
    id: 1000,  //起点和终点都是四位数id
    iconPath: "../../images/start.png",
    longitude:start_lng_lat[0],
    latitude:start_lng_lat[1],
    width: 60,
    height: 60,
    zIndex:1000,//层级是摆设，基本上没用
  }
  let endMarker = {
    id: 1001,  //起点和终点都是四位数id
    iconPath: "../../images/end.png",
    longitude:end_lng_lat[0],
    latitude:end_lng_lat[1],
    width: 60,
    height: 60,
    zIndex:1000,//层级是摆设，基本上没用
  }
  let markerArr = [startMarker,endMarker];
  this.setData({
    start_end_Marker:markerArr
  });
},

/**
 * 刷新当前地图的界面，将几个存储地图Marker整合起来，然后设置到地图marker中去
 */
refreshMarker(){
  //清空当前地图上的所有Marker点，然后将新的覆盖掉
  this.setData({
    markers:[]
  });
  //将公交站Markers 和 公交位置Markers 合并在一起，并且设置到markers
  let busstopMarkers = this.data.busstopsMarkers;//车站Marker
  console.log("BusStopMarker:",busstopMarkers);
  let buslocationMarker = this.data.buslocationMarkers;//公交车实时位置Marker
  console.log("BusLocationMarker",buslocationMarker);
  let start_end_Marker = this.data.start_end_Marker;//公交车站起点和终点Marker
  console.log("BusLineStartEndMarker",start_end_Marker);
  this.setData({
    markers: busstopMarkers.concat(buslocationMarker).concat(start_end_Marker)
  });
},


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //单纯设置一下地图初试的中心位置
    let that = this;
    wx.getLocation({
      success:function(res){
        console.log("当前用户所在位置："+res.longitude+", "+res.latitude)
        that.setData({
          latitude:res.latitude,
          longitude:res.longitude
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})